import React, { useCallback, useMemo, useState } from "react";
import { Card, Flex, Button, Menu, Form } from 'antd';
import { FormattedMessage } from "react-intl";
import { Website } from "./Website";
import { LibAppView } from "../../../../lib";


const SettingWrapper = () => {
    const app = LibAppView.useMicroApp();
    const journeys = useMemo(() => app.getJourneys(), [app]);
    const [ selectedJourney, setSelectJourney ] = useState<AppView.IJourney|undefined>(() => journeys[0]);
    const selectedMenuKeys = useMemo(() => (selectedJourney ? [selectedJourney.name] : []), [selectedJourney]);
    const SelectedJourneyPage = useMemo(() => {
        let currentPage: any = "admin.404";
        if(selectedJourney) {
            currentPage = selectedJourney ? selectedJourney.home || "admin.404" : "admin.404";
        }
        return typeof currentPage === "string" ? app.getPage(currentPage)?.Component : currentPage;
    }, [selectedJourney, app]);
    const onMenuClick = useCallback((data: AppView.IJourney) => {
        !selectedMenuKeys.includes(data.name) && setSelectJourney(data);
    }, [selectedMenuKeys]);
    return (
        <Flex gap="middle" align="start" vertical={false}>
            <section style={{flex: "0 0 200px"}}>
                <Menu selectedKeys={selectedMenuKeys} style={{ minHeight: "70vh"}}>
                    {
                        journeys.map((item) => {
                            return (
                                <Menu.Item key={item.name} onClick={() => onMenuClick(item)}>
                                    {item.title}
                                </Menu.Item>
                            );
                        })
                    }
                </Menu>
            </section>
            <section style={{flex: "auto"}}>
                { SelectedJourneyPage && <SelectedJourneyPage /> }
            </section>
        </Flex>
    );
};

const Setting = () => {
    const app = LibAppView.useApp();
    const { Provider } = app.createMicroApp({
        name: "setting",
        journeys: [{
            title: <FormattedMessage id="admin.pages.settings.menus.general"/>,
            name: "general",
            home: Website,
            isTempJourney: true
        }, {
            title: <FormattedMessage id="admin.pages.settings.menus.account"/>,
            name: "account",
            isTempJourney: true
        }]
    });

    return (<Provider>
        <Card style={{ width: "100%", minHeight: "76vh" }}>
            <SettingWrapper />
        </Card>
    </Provider>
    );
};


export default Setting;
